<template>
    <div class="container">
        <!--标题-->
        <div class="support-title">

        </div>
        <!--支持上部分-->
        <div class="support-top">
            <!--左边图片-->
            <div class="support-top-img">

            </div>
            <!--右边文字-->
            <div class="support-top-word">
                <!--广告支持-->
                <div class="ad top-bottom wow fadeInLeft" data-wow-delay="0s">
                    <p class="word-title">广告支持</p>
                    <p class="word-content">网络广告，电梯广告，户外广告，外卖平台广告等多渠道推广。</p>
                </div>
                <!--开店支持-->
                <div class="newstore top-bottom wow fadeInLeft" data-wow-delay="0.1s">
                    <p class="word-title">开店支持</p>
                    <p class="word-content">提供全套尺寸，选址装修，视觉效果图。</p>
                </div>
                <!--建店支持-->
                <div class="buildstore top-bottom wow fadeInLeft" data-wow-delay="0.2s">
                    <p class="word-title">建店支持</p>
                    <p class="word-content">设备采购支持，平台搭建支持，店面设计，店面施工支持</p>
                </div>
                <!--营运支持-->
                <div class="runstore top-bottom wow fadeInLeft" data-wow-delay="0.3s">
                    <p class="word-title">营运支持</p>
                    <p class="word-content">提高店铺订单量，根据外卖平台数据分析进行指导。</p>
                </div>
            </div>
        </div>
        <!--支持下部分-->
        <div class="support-bottom">
            <!--左边文字-->
            <div class="support-bottom-word">
                <!--开业支持-->
                <div class="startstore top-bottom wow fadeInLeft" data-wow-delay="0s">
                    <p class="word-title">开业支持</p>
                    <p class="word-content">线上线下联动，提高店面影响力，顾问到店指导开业活动。</p>
                </div>
                <!--客服支持-->
                <div class="customerserver top-bottom wow fadeInLeft" data-wow-delay="0.1s">
                    <p class="word-title">客服支持</p>
                    <p class="word-content">提高单店客户口碑，专业客服解决售后问题。</p>
                </div>
                <!--供应链支持-->
                <div class="supply top-bottom wow fadeInLeft" data-wow-delay="0.2s">
                    <p class="word-title">供应链支持</p>
                    <p class="word-content">网络广告，电梯广告，户外广告，外卖平台广告等多渠道推广。</p>
                </div>
                <!--研发支持-->
                <div class="research top-bottom wow fadeInLeft" data-wow-delay="0.3s">
                    <p class="word-title">研发支持</p>
                    <p class="word-content">专业的研发人员，根据人群需求，研发多种新品。</p>
                </div>
            </div>
            <!--右边图片-->
            <div class="support-bottom-img">

            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "zhihci"
    }
</script>

<style lang="less">
    /*标题*/
    .support-title {
        width: 171px;
        height: 57px;
        margin: 76px auto 51px auto;
        background: url("../../assets/images/product/badazhichi_small.png") no-repeat center center;
    }

    /*支持上部分*/
    .support-top {
        height: 335px;
        display: flex;
        justify-content: center;
        /*左边图片*/

        .support-top-img {
            margin-right: 40px;
            flex: 1.1;
            background: url("../../assets/images/product/support_top_img.png") no-repeat right center;
        }

        /*右边文字*/

        .support-top-word {
            flex: 1;
            /*padding-left: 30px;*/
            /*background-color: pink;*/


        }
    }

    /*公共样式*/
    div.top-bottom {
        height: 60px;
        margin-bottom: 31px;

        p {
            &.word-title {
                font-size: 26px;
                font-weight: normal;
                font-stretch: normal;
                color: #333333;
            }

            &.word-content {
                font-size: 16px;
                font-weight: normal;
                font-stretch: normal;
                color: #666666;
            }
        }
    }

    /*支持下部分*/
    .support-bottom {
        margin-top: 64px;
        height: 335px;
        display: flex;
        justify-content: center;
        /*左边文字*/

        .support-bottom-word {
            /*padding-right: 30px;*/
            flex: 1;

            > div {
                text-align: right;
            }
        ;
        }

        /*右边图片*/

        .support-bottom-img {
            margin-left: 40px;
            flex: 1.1;
            background: url("../../assets/images/product/support_bottom_img.png") no-repeat left center;
        }
    }
</style>
